import React from 'react';
import { Modal, Row, Col, Form, Button, Spin } from 'antd';
import styles from '@/pages/search.less';
import { connect } from 'dva';

const viewLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};
// @connect(
//   state => ({
//     loadingqueryRelDbList: state.loading.effects['databaseGroup/queryRelDbList'],
//     dataqueryRelDbList: state.databaseGroup.dataqueryRelDbList,
//   }),
//   dispatch => ({
//     queryRelDbList: e => dispatch({ type: 'databaseGroup/queryRelDbList', payload: e }),
//   })
// )
export default class Detail extends React.Component {
  state = {
    modalVisible: false,
  };
  handleModalVisible = () => {
    if (this.props.disabled) return;
    this.setState(() => ({ modalVisible: !this.state.modalVisible }));
  };
  componentDidMount() {
    // this.props.queryRelDbList({ groupid: this.props.text.groupId });
  }
  render() {
    return (
      <>
        <Modal
          destroyOnClose
          width={640}
          title="查看详情"
          visible={this.state.modalVisible}
          onCancel={() => this.handleModalVisible()}
          footer={[
            <Button key="back" type="primary" onClick={() => this.handleModalVisible()}>
              返回
            </Button>,
          ]}
          className={styles.viewMore}
        >
          <Row>
            <Col md={24}>
              <Form.Item {...viewLayout} label="标签名称">
                {this.props.text.tagName}
              </Form.Item>
            </Col>

            <Col md={24}>
              <Form.Item {...viewLayout} label="备注">
                {this.props.text.remark}
              </Form.Item>
            </Col>
          </Row>
        </Modal>
        <span onClick={this.handleModalVisible}>{this.props.children}</span>
      </>
    );
  }
}
